<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <div class="current-city-wrapper">
        <div class="current-city-title">当前城市</div>
        <router-link to="/">
          <div class="city" @click="getSelectedCity(city)">{{ city }}</div>
        </router-link>
      </div>
      <div class="hot-city-wrapper">
        <div class="hot-city-title">热门城市</div>
        <div class="hot-city" v-for="item of hotCities" @click="getSelectedCity(item.name)" :key="item.id">{{item.name}}</div>
      </div>
      <div class="list-city-wrapper">
        <div v-for="(city,key) of cities" :key="key" :ref="key">
          <div class="list-city-letter">{{key}}</div>
          <div class="list-city-list" v-for="innerCity of city" :key="innerCity.id">
            <div class="city-item border-bottom" @click="getSelectedCity(innerCity.name)">{{innerCity.name}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'List',
  props: {
    hotCities: Array,
    cities: Object,
    letter: String
  },
  computed: {
    ...mapState({
      // city是state中key的名称,传字符串参数 'city' 等同于 `state => this.$state.count`
      city: 'city'
    })
  },
  methods: {
    // ...mapActions(['changeCity1']),
    getSelectedCity (city) {
      this.changeCity(city)
      this.$router.push('/')
    },
    ...mapMutations(['changeCity'])
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.wrapper, { click: true })
  },
  watch: {
    letter () {
      if (this.letter) {
        this.scroll.scrollToElement(this.$refs[this.letter][0])
      }
    }
  }

}
</script>

<style lang="stylus" scoped>
  .wrapper
    position absolute
    overflow hidden
    top 1.5rem
    left 0
    right 0
    bottom 0
    .current-city-wrapper
      height 1.2rem
      .current-city-title
        padding 0 .1rem
        background #e6e6e6
        height .5rem
        line-height .5rem
        font-size .3rem
      .city
        margin .05rem .1rem
        display flex
        flex-direction column
        justify-content center
        border .01rem #e6e6e6 solid
        width 2.3rem
        height .6rem
        text-align center
    .hot-city-wrapper
      margin .1rem 0
      height 1.9rem
      .hot-city-title
        padding 0 .1rem
        background #e6e6e6
        height .5rem
        line-height .5rem
        font-size .3rem
      .hot-city
        float left
        margin .05rem .05rem
        display flex
        flex-direction column
        justify-content center
        border .01rem #e6e6e6 solid
        width 30%
        height .6rem
        text-align center
    .list-city-wrapper
      overflow hidden
      height 100%
      .list-city-letter
        padding 0 .1rem
        background #e6e6e6
        height .5rem
        line-height .5rem
        font-size .3rem
      .list-city-list
        padding .05rem .1rem
        .city-item
          font-size .3rem
          height .5rem
          line-height .5rem

</style>
